<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-resize.js"></script>
    <script src="../dist/plugin-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css" />
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var inputs = {
    	type: jsPsychResize,
    	item_width: 3 + 3/8,
    	item_height: 2 + 1/8,
    	prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
    	pixels_per_unit: 642/4
    };

    var image_display = {
    	type: jsPsychImageKeyboardResponse,
    	stimulus: 'img/happy_face_4.jpg',
    	prompt: '<p>If scaling worked, then the image above should be 4 inches wide.</p>',
    };

    jsPsych.run([inputs, image_display]);

  </script>
</html>
